<div class="base-grid-container">
    <div [style.display]="_showDetailPanel && ! usePopup ? 'none' : 'block'">
        <div *ngIf="searchFormSchema" class="search-form">
            <sf (formChange)="searchFormChange($event)"
                (formSubmit)="doSearch($event)"
                [layout]="'inline'"
                [mode]="'search'"
                [schema]="searchFormSchema"></sf>
        </div>
        <div *ngIf="showToolbar" class="abc">
            <button (click)="addClick()" *ngIf="showAdd && aclEdit"
                    [nzType]="'primary'" nz-button>
                <i
                    nz-icon nzType="plus"
                    theme="outline"></i>{{addButtonText ? addButtonText : '新增'}}
            </button>
            <button (click)="modifyClick(checkData[0], $event)"
                    *ngIf="showModify && checkData && checkData.length === 1 && (aclEdit || !this.showDetailButton)"
                    [nzType]="'primary'"
                    nz-button>
                <i
                    [nzType]="this.showDetailButton ? 'edit': 'snippets'" nz-icon
                    theme="outline"></i>{{modifyButtonText ? modifyButtonText : (this.showDetailButton ? '修改' : '查看')}}
            </button>
            <button (nzOnConfirm)="deleteClick()" *ngIf="showDelete && checkData && checkData.length > 0 && aclDelete"
                    [nzType]="'primary'"
                    nz-button
                    nz-popconfirm
                    nzCancelText="取消" nzOkText="确认"
                    nzTitle="是否{{ deleteButtonText || '删除'}}?"><i nz-icon nzType="delete"
                                                                  theme="outline"></i>{{ deleteButtonText || '删除'}}
            </button>
            <button (click)="loadTipText = '刷新'; reload(); " *ngIf="showRefresh"
                    [nzType]="'primary'" nz-button><i nz-icon nzType="reload"
                                                      theme="outline"></i>刷新
            </button>
            <button (click)="sortClick()" *ngIf="showSort && aclEdit"
                    [nzType]="'primary'" nz-button><i nz-icon nzTheme="outline"
                                                      nzType="sort-ascending"></i>排序
            </button>
            <ng-container *ngIf="showTableListChange">
                <div class="table-list-change">
                    <a (click)="tableListChange('table')" [class.gray]="showType === 'list'">
                        <i [nzType]="'dr:hy-table'" nz-icon></i>
                    </a>
                    <a (click)="tableListChange('list')" [class.gray]="showType === 'table'">
                        <i [nzType]="'dr:hy-lumps'" nz-icon></i>
                    </a>
                </div>
            </ng-container>
            <ng-container *nzStringTemplateOutlet="customButtons">{{ customButtons }}</ng-container>
        </div>
        <div *ngIf="customContent" class="customContent">
            <ng-container *nzStringTemplateOutlet="customContent">{{ customContent }}</ng-container>
        </div>
        <div *ngIf="showType === 'table' && (! _showDetailPanel || usePopup)" class="cc">
            <st (change)="change($event)"
                [columns]="columns"
                [data]="tableDataObservable"
                [page]="page"
                [rowClassName]="rowClassName"
                [scroll]="scroll"
                [size]="'middle'"
                [total]="total"
            >
                <ng-template let-c st-row="edit-checkbox-title" type="title">
                    {{ c.title.text}}
                    <ng-container *ngIf="selectAllConfig && selectAllConfig.property[c.title.text]">
                        <label
                            (ngModelChange)="selectAllConfig.ngModelChangeFn.call(null, {selected: $event, fieldName: selectAllConfig.property[c.title.text]})"
                            [(ngModel)]="selectAllConfig.obj[selectAllConfig.property[c.title.text]]"
                            nz-checkbox
                        ></label>
                    </ng-container>
                </ng-template>
                <ng-template let-column="column" let-index="index" let-item st-row="edit-input">
                    <label>
                        <input [(ngModel)]="item[column.index]" [disabled]=" column.disabled && item['itemDisabled']"
                               nz-input/>
                    </label>
                </ng-template>
                <ng-template let-column="column" let-index="index" let-item st-row="edit-select">
                    <nz-select [(ngModel)]="item[column.index]" [style.width]="'100%'">
                        <nz-option *ngFor=" let option of column['option']" nzLabel="{{option.name}}"
                                   nzValue="{{option.value}}"></nz-option>
                    </nz-select>
                </ng-template>
                <ng-template let-column="column" let-index="index" let-item st-row="edit-checkbox">
                    <label (ngModelChange)="checkboxChange({selected: $event , column:column, dataIndex:index})"
                           [(ngModel)]="item[column.index]"
                           [disabled]=" column.disabled && item['itemDisabled']"
                           nz-checkbox></label>
                </ng-template>
            </st>
        </div>

        <div *ngIf="showType === 'list' && (! _showDetailPanel || usePopup)">
            <div class="list-checkbox" style="margin: 14px 0 0 14px;padding-top: 2px;">
                <div class="checkbox" style="display: inline-block;margin-bottom: 4px">
                    <label>
                        <input [(ngModel)]="selectAll" type="checkbox"> 全选
                    </label>
                </div>
                <div style="margin-left : 30px;display: inline-block;">
                    已选：<span>{{checkData.length}}</span>个
                    / 共：<span>{{tableData.length}}</span>个
                </div>
            </div>
            <ul [style.height.px]="listUlHeight" class="list-ul">
                <ng-template [ngForOf]="tableData" let-item ngFor>
                    <li (click)="clickItem($event,item)"
                        (dblclick)="dbClickItem($event,item)"
                        (mouseenter)=" item.hover = true;"
                        (mouseleave)=" item.hover = false;"
                        [class.active]="item.checked" [class.auto-height]="! selectModel && (aclEdit || aclDelete)"
                        [class.gray]="!item.disabled && (showOperateModify || showOperateDelete)"
                        [class.selected]="item == lastItem"
                        title="{{item[nameField]}}">
                        <i (click)="checkItem($event,item)" *ngIf="!item.disabled" [class.active]="item.checked"
                           class="i-select"
                           nz-icon></i>
                        <ng-template
                            [ngTemplateOutletContext]="{ $implicit: item }"
                            [ngTemplateOutlet]="customListItem ? customListItem : defaultListItem">
                        </ng-template>
                        <div (click)="noBubble($event)"
                             *ngIf="!item.disabled && ! selectModel && ((showOperateModify && aclEdit) || (showOperateDelete && aclDelete))"
                             class="i-button">
                            <button (click)="modifyClick(item, $event)"
                                    *ngIf="item.hover && showOperateModify && aclEdit"
                                    [ngStyle]="{ width: showOperateModify && showOperateDelete ? '53px' : '108px'}"
                                    nz-button
                                    title="修改">
                                <i [nzType]="'edit'" nz-icon theme="outline"></i>
                            </button>
                            <span *ngIf="item.hover && showOperateModify && showOperateDelete && aclEdit && aclDelete"></span>
                            <button (nzOnConfirm)="deleteRecord([item])"
                                    [hidden]="!(item.hover && showOperateDelete && aclDelete)"
                                    [ngStyle]="{ width: showOperateModify&& showOperateDelete ? '53px' : '108px'}"
                                    nz-button nz-popconfirm
                                    nzCancelText="取消"
                                    nzOkText="确认" nzTitle="是否{{ deleteButtonText || '删除'}}?"
                                    title="{{ deleteButtonText || '删除'}}">
                                <i nz-icon nzType="delete" theme="outline"></i>
                            </button>
                        </div>
                    </li>
                </ng-template>
            </ul>

            <ng-template #defaultListItem let-item>
                <span><i [nzType]="typeIcon && (typeIcon[item[typeFieldName]] || typeIcon['default']) || 'file'" nz-icon
                         theme="fill"></i></span>
                <div class="i-text">{{item[nameField]}}</div>
            </ng-template>
        </div>

        <!--<div *ngIf="showType === _showDetailPanel" class="inner-detail">-->
        <!--<ng-container *ngIf="customDetail; else defaultDetailTemplate">-->
        <!--<ng-container *nzStringTemplateOutlet="customDetail">{{ customDetail }}</ng-container>-->
        <!--</ng-container>-->
        <!--</div>-->

        <div *ngIf="showType === 'custom' && (! _showDetailPanel || usePopup)">
            <ng-template
                [ngTemplateOutletContext]="{ $implicit: tableData }"
                [ngTemplateOutlet]="customContainer ? customContainer : defaultContainer">
            </ng-template>

            <ng-template #defaultContainer let-item>
                <span><i nz-icon nzType="dr:hy-terminal" theme="fill"></i></span>
                <div class="i-text">{{item[nameField]}}</div>
            </ng-template>
        </div>
    </div>

    <ng-template #defaultDetailTemplate>
        <ng-container *ngIf="! usePopup">
            <div class="detail-title">{{name}}</div>
        </ng-container>
        <div [class.scoll2]="! usePopup">
            <base-detail
                (eventClose)="detailClose($event)"
                (formChangeEvent)="formChange($event)"
                [afterInit]="afterDetailInit"
                [baseParam]="baseParam"
                [commitWrapper]="commitWrapper"
                [customCommitMethod]="customCommitMethod"
                [detailPanelType]="detailPanelType"
                [height]="popupHeight"
                [name]="name"
                [recordWrapper]="recordWrapper"
                [record]="record"
                [schema]="schema"
                [showButton]="showDetailButton && aclEdit"
                [usePopup]="usePopup"
                [width]="popupWidth"
            >
            </base-detail>
        </div>
    </ng-template>

    <ng-container *ngIf="_showDetailPanel">
        <ng-container *ngIf="customDetail; else defaultDetailTemplate">
            <ng-container *nzStringTemplateOutlet="customDetail">{{ customDetail }}</ng-container>
        </ng-container>
    </ng-container>


    <base-sort (eventChange)="sortChange($event)"
               (eventExit)="_showSortPanel = false"
               *ngIf="_showSortPanel"
               [data]="tableData"
               [showField]="sortNameField"
    ></base-sort>

</div>
